<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from 'echarts'
import 'echarts-liquidfill'
const people=ref('215908人')
const charts = ref()
onMounted(()=>{
  const myCharts:any = echarts.init(charts.value)
  myCharts.setOption({
    //标题
    title:{
      text:'水球图'
    },
    //x和y轴组件
    xAxis:{},
    yAxis:{},
    //系列：决定你展示什么样的图形图标
    series:{
      type: 'liquidFill',
      data: [0.6,0.4],
      waveAnimation: true,//动画
      animationDuration: 0,
      animationDurationUpdate: 0,
      radius:'90%',
      outline: {
        show: false,
        itemStyle:{
          color:'red',
          shadowColor:'rgba(0,0,0,0.25)'
        }
      }
    },
    // 布局组件
    grid:{
      left:0,
      top:0,
      bottom:0,
      right:0
    }
  })
})
</script>

<template>
  <div class="box">
    <div class="top">
      <p class="tit">实时游客统计</p>
      <p class="bg"></p>
      <p class="count">可预约总量<span>999999</span>人</p>
    </div>
    <div class="number">
      <span v-for="(item,index) in people" :key="index">{{item}}</span>
    </div>
    <div class="echarts" ref="charts">
    </div>
  </div>
</template>

<style scoped lang="scss">
.box{
  background: url("../../images/dataScreen-main-lb.png") no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  .top{
    margin-left: 20px;
    .tit{
      color: white;
      font-size: 20px;
      margin:10px 0;
    }
    .bg{
      width: 68px;
      height: 7px;
      background: url("../../images/dataScreen-title.png");
    }
    .count{
      float: right;
      color: white;
      font-size: 16px;
      margin-right: 30px;
      span{
        color: yellowgreen;
      }
    }
  }
  .number{
    margin-top: 35px;
    display: flex;
    padding: 0 20px;
    margin-bottom: 15px;
    span{
      color: white;
      flex:1;
      height: 37px;
      text-align: center;
      line-height: 37px;
      background: url("../../images/total.png") no-repeat;
      background-size: cover;
      margin: 0 1px;
      font-size: 22px;
    }
  }
  .echarts{
    width: 100%;
    height: 200px;
    color: white;
  }
}
</style>